<template>
  <div>
    <!-- <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="12" type="flex" justify="flex-end">
            <div style="display:flex">
              <div class="block">
                <el-avatar shape="square" :size="50" :src="url"></el-avatar>
              </div>
              <div class="username">管理员</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="outbtn">
              <i class="el-icon-setting" style="padding-right:40px"></i>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px" style="height: 100vh;background-color:#304156; ">
          <menus />
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>-->
    <el-container style="height: 100vh; ">
      <el-aside width="collapse" style="background-color:#304156;">
        <div class="block">
          <el-avatar :size="66" :src="user.adminHeadImg"></el-avatar>
        </div>
        <div class="username" v-if="username">{{user.adminAccount}}</div>
        <!-- 正式数据 -->
        <menus :isCollapse="isCollapse" :menuList="user.menuList" />
      </el-aside>
      <el-container>
        <el-header class="navbar">

          <!-- 侧边栏 -->
          <i class="el-icon-s-fold" @click="isC" v-show="block"></i>
          <i class="el-icon-s-unfold" @click="isC" v-show="toggle"></i>

          <div style="position: absolute;top: 0;right: 50px;">
            <el-dropdown @command="handleCommand">
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="outlogin">退出登录</el-dropdown-item>
                <!-- <el-dropdown-item>新增</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>-->
              </el-dropdown-menu>
            </el-dropdown>
            <!-- <span class="spanlogin">{{user.adminAccount||'未登录'}}</span> -->
          </div>
        </el-header>
        <!-- 标签页导航栏 -->
        <!-- 123123 -->

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import menus from "@/components/menu";
export default {
  components: {
    menus
  },
  data() {
    return {
      user: {}, //用户信息
      isCollapse: false,
      username: true,
      toggle: false, //第二个图标默认隐藏
      block: true, //默认显示第一个图标
      url:
          "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
    };
  },
  // 获取用户信息
  mounted() {
    const userMessage = sessionStorage.getItem("userMessage");
    if (userMessage) {
      console.log("获取用户信息", JSON.parse(userMessage));
      this.user = JSON.parse(userMessage);
      console.log(this.user);
    } else {
      this.$router.push("/login"); //退出跳转到登陆页面
    }
  },
  methods: {
    // 菜单栏侧边栏是否展开缩放
    isC() {
      this.isCollapse = !this.isCollapse;
      this.toggle = !this.toggle;
      this.block = !this.block;
      this.username = !this.username;
    },
    handleCommand(val) {
      if (val == "outlogin") {
        this.$router.push("/login"); //退出跳转到登陆页面
        sessionStorage.removeItem("userMessage"); //退出移除用户相关信息
      }
      console.log(val);
    }
  }
};
</script>

<style scoped>
.spanlogin {
  line-height: 40px;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
}
.el-icon-setting {
  font-size: 30px;
  cursor: pointer;
  color: #fff;
}
.el-icon-s-fold {
  font-size: 30px;
  cursor: pointer;
  color: #fff;
}
.el-icon-s-unfold {
  font-size: 30px;
  cursor: pointer;
  color: #fff;
}
.outbtn {
  width: 100%;
  height: 60px;
  /* background-color: red; */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 30px;
  cursor: pointer;
  /* padding-right: 300px; */
}
.username {
  font-size: 20px;
  font-weight: 400;
  font-family: Microsoft YaHei;
  /* margin-left: 10px; */
  margin-top: 10px;
  text-align: center;
  color: #ffffff;
}
.block {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  /* width: 200px;
  height: 200px; */
  /* margin: 5px; */
}
.navbar {
  background-color: #43c9db;
  box-shadow: 0px 0px 16px -8px;
  /* color: #333; */
  line-height: 66px;
  height: 60px !important;
  /* border-bottom: 2px solid #50bfff; */
}
.el-aside {
  overflow: hidden;
}
.el-main {
  /* border-right: none; */
  padding: 0px !important;
}
</style>